<template>
  <div class="div">
    <p class="fead">OPPO A3</p>
    <img class="img" src="../assets/1.gif" alt="">
    <dl class="dl1">
      <dt class="dt1"><img src="../assets/2.gif" alt=""></dt>
      <dd class="dd1">手机</dd>
    </dl>
    <dl class="dl1">
      <dt class="dt1"><img src="../assets/3.gif" alt=""></dt>
      <dd class="dd1">手机</dd>
    </dl>
    <dl class="dl1">
      <dt class="dt1"><img src="../assets/4.gif" alt=""></dt>
      <dd class="dd1">手机</dd>
    </dl>
    <dl class="dl1">
      <dt class="dt1"><img src="../assets/5.gif" alt=""></dt>
      <dd class="dd1">手机</dd>
    </dl>
    <img src="../assets/7.gif" alt="">
    <h3>手机专区</h3>
    <img src="../assets/8.gif" alt="">
    <dl class="dl2">
      <dt><img class="dt2" src="../assets/9.gif" alt=""></dt>
      <dd class="dd4">首页</dd>
    </dl>
    <dl class="dl2">
      <dt><img class="dt2" src="../assets/10.gif" alt=""></dt>
      <dd>首页</dd>
    </dl>
    <dl class="dl2">
      <dt><img class="dt2" src="../assets/11.gif" alt=""></dt>
      <dd>首页</dd>
    </dl>
    <dl class="dl2">
      <dt><img class="dt2" src="../assets/12.gif" alt=""></dt>
      <dd>首页</dd>
    </dl>
  </div>
</template>

<script setup>

</script>

<style scoped>
.div{
  width: 696px;
  height: 1208px;
  border: 1px solid #ccc;
  border-radius: 10%;
  position: relative;
  left: 200px;
}
.fead{
  width: 696px;
  height: 86px;
  color: #ccc;

}
.dl1{
  width: 83px;
  height: 122px;
  float: left;
  margin-left: 75px;
}
.dl2{
  width: 75px;
  height: 122px;
  float: left;
  margin-left: 75px;
}
.dd4{
  color: #f44d41;
}
</style>